<template>
  <div>
    <span>
      <span>请上传配置文件：</span>
      <span>
        <el-button
          size="mini"
          type="danger"
          style="float: right;margin:0 10px 0 0;"
          @click="handleDelt(id)"
        >重置</el-button>
        <el-button
          size="mini"
          type="success"
          style="float: right;margin:0 30px 0 0;"
          @click="handleClick(id)"
        >配置数据源</el-button>
        <el-button
          size="mini"
          type="primary"
          style="float: right;margin:0 30px 0 0;"
          @click="handleDownload()"
        >下载模板文件</el-button>
      </span>
    </span>
    <!-- 以下补充上传文件的地址 -->
    <el-upload
      ref="upload"
      style="margin:20px 0 20px 150px"
      class="upload-demo"
      drag
      action="127.0.0.1:8000/upload_file/excel"
      :before-upload="handleUpload"
      multiple
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div slot="tip" class="el-upload__tip">
        当前支持上传Excel/CSV文件，上传后点击右侧配置，请勿重复上传。
      </div>
    </el-upload>

    <el-table :data="tableData" height="300" border style="position:relative;width: 100%">
      <el-table-column prop="order_date" label="订单日期" />
      <el-table-column prop="cus_name" label="客户名" />
      <el-table-column prop="cus_type" label="客户类型" />
      <el-table-column prop="sales_vol" label="销售额" />
      <el-table-column prop="sales_num" label="销售量" />
      <el-table-column prop="discount" label="折扣" />
      <el-table-column prop="profit" label="利润" />
      <el-table-column prop="order_category" label="商品类别" />
      <el-table-column prop="cate_items" label="子类别" />
      <el-table-column prop="order_name" label="商品名" />
      <el-table-column prop="iss_date" label="发货日期" />
      <el-table-column prop="area" label="地区" />
      <el-table-column prop="city" label="城市" />
    </el-table>
  </div>
</template>

<script>
import { getDatalist, deleteById, uploadfile } from '@/api/datasource'

export default {
  data() {
    return {
      id: 6,
      tableData: [],
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    // 通过a标签的链接向后端服务发get请求，接收后端的文件流,此处需补充文件地址
    handleDownload() {
      const a = document.createElement('a')
      a.href = 'http://127.0.0.1:8001/static/订单详情表.xlsx'
      a.click()
    },
    // 文件上传
    handleUpload(file) {
      const filemap = { file_type: this.id, file: file }
      console.log(filemap)
      uploadfile(filemap).then(response => {
        const resp = response
        console.log(resp)
        if (resp.flag) {
          this.$message({
            type: 'success',
            message: '文件上传成功'
          })
          // this.getimageList()
        } else {
          this.$message({
            message: resp.message,
            type: 'warning'
          })
        }
      })
    },
    handleClick(id) {
      getDatalist(this.id).then(response => {
        const resp = response
        if (this.tableData) {
          if (resp.flag) {
            this.tableData = resp.data
            this.$message({
              message: '数据源配置成功！',
              type: 'success'
            })
          } else {
            this.$message.error('配置失败，请上传配置文件')
          }
        } else {
          this.$message.error('当前存在数据源，请先重置')
        }
      })
    },

    fetchList() {
      getDatalist(this.id).then(response => {
        this.tableData = response.data
      })
    },

    handleDelt(id) {
      console.log('删除', id)

      this.$confirm('此操作将永久删除当前数据源信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$refs['upload'].clearFiles()
          deleteById(id).then(response => {
            const resp = response
            this.fetchList()
          })
        })
    }
  }
}
</script>

<style scoped>
</style>
